<template>
	<custom-layout custom-class="custom-layout">
		<!-- 提现列表 -->
		<view v-if="withdrawalList.length" class="withdrawalList">
			<!-- 卡片 -->
			<wd-card v-for="_ in withdrawalList" :key="_.id"
				>
				
				<template #title>
					<view class="top-title">
						<view class="money">
							<text>{{(_.money).toFixed(2)}}</text>
							<image v-if="_.status == 2" src="/static/image/record/withdraw-gray.png" mode="aspectFit"></image>
							<image v-else src="/static/image/record/withdraw.png" mode="aspectFit"></image>
						</view>
						<view class="status">
							<image v-if="_.status !=2 " src="/static/image/record/success.png" mode="aspectFit"></image>
							<image v-if="_.status == 2" src="/static/image/record/error.png" mode="aspectFit"></image>
							
						</view>
					</view>
				</template>
				<wd-divider color="#efefef"></wd-divider>
				<view class="card-item">
					<view class="title">发起时间</view>
					<view class="content">{{_.createTime&&dayjs(_.createTime).format('YYYY-MM-DD HH:mm:ss')}}</view>
				</view>
				<view class="card-item">
					<view class="title">到账时间</view>
					<view class="content">{{_.paymentTime&&dayjs(_.paymentTime).format('YYYY-MM-DD HH:mm:ss')}}</view>
				</view>

				<view class="card-item">
					<view class="title">备注</view>
					<view class="content">{{_.remark}}</view>
				</view>
				<view class="card-item">
					<view class="title">状态</view>
					<view class="content">{{dictionaryStore.analysis('withdrawal_status',_.status)}}</view>
				</view>
			
			</wd-card>
		</view>
		<!-- 空 -->
		<wd-status-tip v-else image="search" tip="暂无数据" />
	</custom-layout>
</template>

<script setup>
	import {
		ref,
		watch
	} from 'vue'
	import {
		getWithdrawalList
	} from '@/api/withdrawal/index.js'
	import {
		useDictionaryStore,
		useUserStore
	} from '@/store/index.js'
	import dayjs from 'dayjs'

	// 字典仓库
	const dictionaryStore = useDictionaryStore()
	// 用户仓库
	const userStore = useUserStore()
	// 提现列表
	const withdrawalList = ref([])
	// 处理获取提现列表
	const handleGetWithdrawalList = () => {
		uni.showLoading()
		const params = {
			wxUserId: userStore.userId
		}
		getWithdrawalList(params).then((data) => {
			withdrawalList.value = data
		}).catch((error) => {
			setTimeout(() => {
				uni.showToast({
					title: error,
					icon: 'error'
				})
			})
		}).finally(() => {
			uni.hideLoading()
		})
	}
	// 监听用户id
	watch(() => userStore.userId, () => {
		if (userStore.userId && !withdrawalList.value.length) handleGetWithdrawalList()
	}, {
		immediate: true
	})
</script>

<style lang="scss" scoped>
	// 自定义布局
	:deep(.custom-layout) {
		background: #F8F8F8;
	}

	// 提现列表
	.withdrawalList {
		.top-title {
			display: flex;
			justify-content: space-between;
			.money {
				display: flex;
				justify-content: flex-start;
				text {
					font-weight: bold;
					font-size: 50rpx;
					
				}
				image {
					width: 69rpx;
					height: 34rpx;
					margin-left: 10rpx;
				}
				
			}
			.status {
				image {
					width: 50rpx;
					height: 50rpx;
				}
			}
			
		}
		.card-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 28rpx;
			color: #333333;
			margin: 10rpx 0;
			.title {
				color: #a5a5a5;
			}
		}

		.footer {
			:deep(.button) {
				margin: 0 6rpx;
			}
		}
		:deep(.wd-divider) {
			margin-top: 0;
		}
		:deep(.wd-card__footer) {
			padding-bottom: 4px;
		}
	}
</style>